<template>
  <div>
    <el-row>
      <el-col :span="24" class="content_title clearfix">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
      </el-col>
    </el-row>

    <div class="content_edit">
      <div class="black">
        <h5>基本信息</h5>
        <div class="add_con_form info">
          <ul style="width:1300px">
            <li>
              <span>会员账号：</span>
              {{ info.username }}
            </li>
            <li>
              <span>法人姓名：</span>
              {{ info.name }}
            </li>
            <li>
              <span>身份证号：</span>
              {{ info.card }}
            </li>

            <li>
              <span>店铺名称：</span>
              {{ info.title }}
            </li>
            <li>
              <span>店铺地址：</span>
              {{
                $fnc.deleteNumber(
                  info.province + info.city + info.area + info.town
                ) + info.add
              }}
            </li>
            <li>
              <span>审核状态：</span>
              {{
                info.is_check == 0
                  ? "正在审核"
                  : info.is_check == 1
                  ? "审核通过"
                  : "审核驳回"
              }}
            </li>
            <li v-if="info.supplier_company_tel">
              <span>申请号码：</span>
              {{ info.supplier_company_tel }}
            </li>
            <li>
              <span>申请时间：</span>
              {{ info.created_time | getTimeFormat }}
            </li>
            <li>
              <span>备注：</span>
              {{ info.remark }}
            </li>
          </ul>
        </div>
      </div>

      <div class="black">
        <h5>资质信息</h5>
        <div class="add_con_form info">
          <ul style="width:1300px">
            <li>
              <span>身份证正面</span>
              <p>
                <el-image style="width: 200px; height: 100px" :src="info.cardpositive" @click="getImg(info.cardpositive)" fit="fit"></el-image>
              </p>
            </li>
            <li>
              <span>身份证反面</span>

              <p>
                <el-image style="width: 200px; height: 100px" :src="info.cardnegative" @click="getImg(info.cardnegative)" fit="fit"></el-image>
              </p>
            </li>
            <li>
              <span>企业营业执照</span>
              <p>
                <el-image style="width: 200px; height: 100px" :src="info.license" @click="getImg(info.license)" fit="fit"></el-image>
              </p>
            </li>
            <li>
              <span>上传厂家授权</span>
              <p>
                <el-image style="width: 200px; height: 100px" :src="info.supplier_company_check" @click="getImg(info.supplier_company_check)"
                    fit="fit"></el-image>
              </p>
            </li>
          </ul>
          <div class="blank"></div>
        </div>
      </div>

      <div class="black">
        <h5>商品样图</h5>
        <div class="add_con_form info">
          <ul style="width:1300px">
            <li v-for="item in info.image" :key="item.id">
              <!-- <p>  -->
              <el-image style="width: 200px; height: 200px" :src="item.piclink" @click="getImg(item.piclink)" fit="fit"></el-image>
              <!-- </p> -->
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog title="图片信息" :visible.sync="dio">
      <img :src="$fnc.getImgUrl(piclink)" alt />
    </el-dialog>
  </div>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
export default {
  components: {
    HeadTitle
  },
  data () {
    return {
      info: {},
      piclink: "",
      dio: false
    };
  },
  mounted () {
    this.getSupplierDetails();
  },
  methods: {
    getImg (src) {
      this.piclink = src;
      this.dio = true;
    },
    getSupplierDetails () {
      var id = this.$route.query.id || "";
      this.$api.getUser.editSupplier({ id }).then(res => {
        if (res.data.code == 200) {
          this.info = res.data.result;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
ul {
  overflow: hidden;
}
li p {
  margin-top: 10px;
}
.black {
  padding-bottom: 10px;
}
</style>
